<template>
  <div class="item" @click='changedTouches'>
    <div class="item-overlay opacity animated wrapper " :class='fadeInType'>
      <p class="text-white">N.0{{number}}</p>
      <div class="center text-center m-t-n">
        <a><i class="icon-control-play i-2x"></i></a>
      </div>
    </div>
    <div :class="textPosition">
      <div class="m-t m-b"><a
        class="b-b b-info h4 text-warning">{{topList[number].keyWord}}</a>
      </div>
      <p class="hidden-xs">
        {{topList[number].state}}
      </p>
    </div>
    <a><img :src="imgUrl"
            alt="" class="img-full"></a>
  </div>
</template>

<script>
    import Vue from 'vue';
    import {mapActions, mapGetters} from 'Vuex'
    export default {
        data() {
            return {
              topList: [
                {keyWord: "云音乐新歌榜", state: "云音乐新歌榜：云音乐用户一周内收听所有新歌（一月内最新发行） 官方TOP排行榜，每天更新。"},
                {keyWord: "云音乐热歌榜", state: '云音乐热歌榜：云音乐用户一周内收听所有线上歌曲 官方TOP排行榜，每周四更新。'},
                {keyWord: "网易原创歌曲榜", state: "云音乐独立原创音乐人作品官方榜单，以推荐优秀原创作品为目的。每周四网易云音乐首发。"},
                {keyWord: "云音乐飙升榜", state: "云音乐中每天热度上升最快的100首单曲，每日更新。"},
                {keyWord: "云音乐电音榜", state: "网易云音乐联合众平台打造的云音乐“电音榜”！每周为大家带来国内外优秀的电子音乐！"},
                {keyWord: "UK排行榜周榜", state: "UK charts(英国流行音乐排行榜)，每周同步更新"},
                {keyWord: "美国Billboard周榜", state: "美国BILLBOARD排行榜，每周一更新。"},
                {keyWord: "KTV嗨榜", state: "国内首个以全国超过200家KTV点歌平台真实数据的当红歌曲榜单。唛榜每周五更新。"},
                {keyWord: "iTunes榜", state: "世界音乐榜，每周一更新"},
                {keyWord: "Hit FM Top榜", state: "中国国际广播电台国际流行音乐节目HitFM Top20 Countdown，每周同步更新。"},
                {keyWord: "日本Oricon周榜", state: "ORICONSTYLE CD单曲周榜，每周三更新，欢迎关注。"},
                {keyWord: "韩国Melon排行榜周榜", state: "MelOn韩国最大的音源网站，每周一更新。"},
                {keyWord: "韩国Mnet排行榜周榜", state: "韩国MNet电视台推出的一份非常权威的榜单，包含最新的韩国打榜歌曲的排名情况。"},
                {keyWord: "韩国Melon原声周榜", state: "MelOn包涵了几乎所有在韩国发行的歌曲，包括数码单曲，专辑歌曲，迷你专辑歌曲，OST等。"},
                {keyWord: "中国TOP排行榜(港台榜)", state: "MusicRadio音乐之声依据时下最热门的流行单曲形成的权威音乐榜单。"},
                {keyWord: "中国TOP排行榜(内地榜)", state: "由MusicRadio音乐之声依据时下最热门的流行单曲形成的权威音乐榜单。"},
                {keyWord: "香港电台中文歌曲龙虎榜", state: "香港电台中文歌曲龙虎榜"},
                {keyWord: "华语金曲榜", state: "华语金曲榜官方榜"},
                {keyWord: "中国嘻哈榜", state: "全国唯一纯正的华语说唱音乐排行榜。每周更新一期，每期十首。"},
                {keyWord: "法国 NRJ EuroHot 30周榜", state: "法国最受欢迎的音乐电台和听众最多的广播电台之一，【每周五更新】"},
                {keyWord: "台湾Hito排行榜", state: "Hito中文排行榜每周一新鲜出炉，由DJ - Bryan为你新鲜推出 ，并有精彩战况分析。"},
                {keyWord: "Beatport全球电子舞曲榜", state: "目前全球最大的电子音乐付费下载网站之一和最具权威性的全球电子音乐排行榜。"},
                {keyWord: "Blod 我的博客", state: "目前全球最大的电子音乐付费下载网站之一和最具权威性的全球电子音乐排行榜。"},
                {keyWord: "码云", state: "目前全球最大的电子音乐付费下载网站之一和最具权威性的全球电子音乐排行榜。"},
                {keyWord: "gitHub", state: "目前全球最大的电子音乐付费下载网站之一和最具权威性的全球电子音乐排行榜。"}
              ]
            }
        },
        props: {
          number:{
            type:String,
            default:'0'
          },
          fadeInType:{
            type:String,
            default:'fadeInUp'
          },
          position: {
            type:String,
            default:'bottom'
          },
          img: {
            type:String,
            default:'m21.jpg'
          }
        },
      computed: {
          textPosition() {
            return this.position=='bottom'? 'bottom wrapper text-info-lter gd':'item-overlay bg-info active gd  wrapper text-center'
          },
        imgUrl() {
            return '../../../static/images/'+this.img
        },
        ...mapGetters([
          'data'
        ])
      },
        methods: {
          changedTouches(){
            this.$store.commit('fetchData',{url: '/top/list?idx='+this.number})
          }
        },
      watch: {
          data() {
            if(this.$route.name=='musicRecommend'){
              this.$store.commit('play', {id:66666,type:'billboard'})
            }

          }
      }
    }
</script>
<style>

</style>
